<template>
  <!-- 栏目管理页面的处理
     1.静态结构 已添加栏目+未添加栏目 
     2.axios获取栏目列表
    3.数据动态渲染页面结构
     4. 本地存储 中 进行
     已添加栏目-点击对应栏目删除，并在未添加栏目中添加
     未添加栏目-点击对应栏目删除，并在已添加栏目中添加 -->
  <div class="catemanager">
    <myheader title="频道管理">
      <span
        slot="left"
        class="iconfont iconjiantou2"
        @click="$router.back()"
      ></span>
    </myheader>
    <div class="mychannel">
      <h3>点击删除频道</h3>
      <div class="list">
        <span
          v-for="(v, i) in hasCateList"
          :key="i"
          @click="removeCate(i, v)"
          >{{ v.name }}</span
        >
      </div>
    </div>
    <div class="youchannel">
      <h3>点击添加频道</h3>
      <div class="list">
        <span
          v-for="(value, index) in addCateList"
          :key="index"
          @click="addCate(index, value)"
          >{{ value.name }}</span
        >
      </div>
    </div>
  </div>
</template>

<script>
import myheader from "@/components/myheader.vue";
import { getCateList } from "@/api/category";
export default {
  data() {
    return {
      hasCateList: [], //已有列表存储
      addCateList: [], //未添加列表存储
    };
  },
  components: {
    myheader,
  },
  methods: {
    removeCate(index, value) {
      this.hasCateList.splice(index, 1);
      this.addCateList.push(value);
      localStorage.setItem("hasCateList", JSON.stringify(this.hasCateList));
      localStorage.setItem("addCateList", JSON.stringify(this.addCateList));
    },
    addCate(index, value) {
      this.addCateList.splice(index, 1);
      this.hasCateList.push(value);
      localStorage.setItem("hasCateList", JSON.stringify(this.hasCateList));
      localStorage.setItem("addCateList", JSON.stringify(this.addCateList));
    },
  },
  async mounted() {
    if (localStorage.getItem("hasCateList")) {
      this.hasCateList = JSON.parse(localStorage.getItem("hasCateList"));
    } else {
      let res = await getCateList();
      // 不考虑“关注”和“头条”---需删除该项:登录状态与非登录状态
      if (localStorage.getItem("hm_toutiao_56")) {
        res.data.data.splice(0, 2);
      } else {
        res.data.data.splice(0, 1);
      }
      this.hasCateList = res.data.data;
      // console.log(this.CateList);
    }
    if (localStorage.getItem("addCateList")) {
      this.addCateList = JSON.parse(localStorage.getItem("addCateList"));
    }
  },
};
</script>

<style lang="less" scoped>
.mychannel,
.youchannel {
  padding: 10px;
  h3 {
    line-height: 30px;
    font-weight: bold;
  }
  .list {
    padding: 10px;
    display: flex;
    flex-wrap: wrap;
    > span {
      width: 20%;
      margin-left: 10px;
      margin-top: 10px;
      border: 1px solid #ccc;
      text-align: center;
      line-height: 40px;
    }
  }
}
</style>